<!-- table -->
<template>
  <a-card>
    <form :autoFormCreate="(form) => this.form = form">
      <a-table
        :columns="columns"
        :dataSource="data==null?data=[]:data"
        :pagination="false"
      >
        <template v-for="(col, i) in ['professorTypeName', 'professorNumber']" :slot="col" slot-scope="text, record, index">
          <a-input
            :key="i"
            v-if="record.editable.toString()=='true'&&col=='professorNumber'"
            style="margin: -5px 0"
            :value="text"
            :placeholder="columns[i].title"
            @change="e => handleChange(e.target.value, record.id, col)"
          />
          <template v-else-if="record.editable.toString()=='false'&&col=='professorNumber'">{{ text }}</template>
<!--record.editable.toString()=='true'&&col=='professorTypeName'&&record.isSave.toString()=='false'-->
          <OwnJCategorySelect
            back="name"
            :value="record.professorType"
            :parkey="record.id+''"
            v-if="record.editable.toString()=='true'&&col=='professorTypeName'&&record.isSave.toString()=='false'"
            pcode="B03"
            placeholder="请选择专家类型"
            @change="change"
          />
          <template v-else-if="record.editable.toString()=='false'&&col=='professorTypeName'&&record.isSave.toString()=='false'">{{ text }}</template>
          <template v-else-if="record.editable.toString()=='true'&&col=='professorTypeName'&&record.isSave.toString()=='true'">{{ text }}</template>
          <template v-else-if="record.editable.toString()=='false'&&col=='professorTypeName'&&record.isSave.toString()=='true'">{{ text }}</template>



        </template>
        <template slot="operation" slot-scope="text, record, index">
          <template v-if="record.editable.toString()=='true'">
              <span v-if="record.editable.toString()=='true'">
                <a @click="saveRow(record.id)">添加</a>
                <a-divider type="vertical" />
                <a-popconfirm v-if="record.isSave.toString()=='false'&&record.isNew.toString()=='true'" title="是否要删除此行？" @confirm="remove(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </span>
            <span v-else>
                <a @click="saveRow(record.id)">保存</a>
                <a-divider type="vertical" />
                <a @click="cancel(record.id)">取消</a>
              </span>
          </template>
          <span v-else>
              <a @click="toggle(record.id)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm  v-if="record.isSave.toString()=='false'" title="是否要删除此行？" @confirm="remove(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </span>
        </template>
      </a-table>
      <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成员</a-button>
    </form>
  </a-card>
</template>

<script>
  import JCategorySelect from '@/components/jeecg/JCategorySelect'
  import OwnJCategorySelect from '@/components/jeecg/OwnJCategorySelect'
  import {getAction} from "../../../api/manage";
  export default {
    name: "DynamicForm",
    components: {
      JCategorySelect, OwnJCategorySelect,
    },
    data () {
      return {
        loading: false,
        value:'',
        // table
        url:{
          deletes:"/projectProfessorInfo/deletowntype",
        },
        columns: [
          {
            title: '专家类型',
            dataIndex: 'professorTypeName',
            key: 'professorTypeName',
            width: '30%',
            scopedSlots: { customRender: 'professorTypeName' }
          },
          {
            title: '专家人数',
            dataIndex: 'professorNumber',
            key: 'professorNumber',
            width: '20%',
            scopedSlots: { customRender: 'professorNumber' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
      }
    },
    props:{
      data:{
        type:Array,
        default:[
          {
          id: '',
          professorTypeName: '',
          professorType:'',
          professorNumber: '',
          editable: true,
          isNew: true,
          isSave:false,
        }
        ],
        required:false,
      }
    },
    methods: {
      handleSubmit (e) {
        console.log(445)
        console.log(e)
        e.preventDefault()
      },
      newMember () {
        let key = this.data.length;
        this.data.push({
          id: key,
          professorTypeName: '',
          professorType:'',
          professorNumber: '',
          editable: true,
          isNew: true,
          isSave:false,
        })
        this.value="";
      },
      remove (key) {
        console.log("delet")
        console.log(key)
        getAction(this.url.deletes+"/"+key,"").then((res)=>{
          console.log(res);
        })
        const newData = this.data.filter(item => item.id !== key)
        console.log("20")
        this.data = newData
        console.log(this.data)
      },
      saveRow (key) {
        let target = this.data.filter(item => item.id === key)[0]
        target.editable = false
        target.isNew = false
        this.value="";
        console.log(22)
        console.log(target)
      },
      toggle (key) {
        console.log("key")
        console.log(key)
        let target = this.data.filter(item => item.id === key)[0]
        target.editable = true;
        target.isSave=false
        console.log("target")
        console.log(target)
      },
      getRowByKey (key, newData) {
        const data = this.data
        return (newData || data).filter(item => item.id === key)[0]
      },
      cancel (key) {
        let target = this.data.filter(item => item.id === key)[0]
        target.editable = false
      },
      change(value,obj,key){
        console.log("value")
        console.log(value)
        console.log("key222")
        console.log(key)
        console.log("obj")
        console.log(obj)
        let that =this;
        const newData = [...this.data];
        const target = newData.filter(item => key == item.id)[0];
        console.log(target)
          var index=target.id;
          if (target) {
            for(var i=0;i<this.data.length;i++){
              if(this.data[i].professorType==value){
                alert("请选择不同的类型");
                return;
              }
              // this.data[index].key=value;
              if(this.data[i].id==key){
                this.data[i].professorType=value;
                this.data[i].professorTypeName=obj.name;
              }
            }

          }
      },
      handleChange (value, key, column) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.id)[0]
        if (target) {
          target[column] = value
        }
      },
    }
  }
</script>